<template>
  <!-- 下班组件 -->
  <div>
    <!-- 任务 -->
    <div class="gotowork_content1">
      <span>待领任务</span>
      <span @click="ToUnclaimed">更多 &gt;</span>
    </div>

    <div class="gotowork1">
      <div
        class="gotowork_content"
        v-for="(item, index) in worklist"
        :key="index"
      >
        <div class="gotowork_content2">
          <div class="content2_title">
            <span>{{ item.title }}</span>
            <span>{{item.area}} | {{ item.cate_name }}</span>
            <span @click="ToUnclaimed">详情 &gt;</span>
          </div>
          <div class="content2_content">
            <div class="content2_details">
              <span>费用: {{ item.price }}</span>
              <span>时间: {{ item.add_time }}</span>
            </div>
            <div class="identification">
              {{ status == 0 ? "未完成" : "已完成" }}
            </div>
          </div>
        </div>
        <div class="gotowork_content3">
          <div>
            <img :src="item.avatar" alt="" />
            <span>{{ item.nickname }}</span>
          </div>
          <span>{{item.address}}</span>
          <span>{{item.timeTran}}</span>
        </div>
      </div>
    </div>

    <!-- <div class="gotowork_content">
      <div class="gotowork_content2">
        <div class="content2_title">
          <span>上水管维修</span>
          <span>房县|上水维修</span>
          <span @click="Todeterminedes">详情 &gt;</span>
        </div>
        <div class="content2_content">
          <div class="content2_details">
            <span>费用: 888</span>
            <span>时间: 2020.12.12</span>
          </div>
          <div class="identification">已完成</div>
        </div>
      </div>
      <div class="gotowork_content3">
        <div>
          <img src="/" alt="" />
          <span>马先生</span>
        </div>
        <span>房县诗经广场...</span>
        <span>1分钟以前</span>
      </div>
    </div> -->
  </div>
</template>

<script>
export default {
  props: {
    worklist: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    // add_time: "2020.09.29"
    // address: "湖北省武汉市"
    // avatar: "https://zam.skinnews.net/uploads/attach/2020/07/20200702/d420af9084f5c6f1fbff9dfc2e89fbab.png"
    // cate_id: 10
    // cate_name: "给水维修"
    // door_fee: "0.00"
    // id: 157
    // mobile: "18621572065"
    // nickname: "186****2065"
    // number: "HQ20200929156"
    // status: 0
    // title: "给水维修"
    // uid: 316
    return {};
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    // 跳转待领取任务页面
    ToUnclaimed() {
      wx.showModal({
        title: '您已下班，请上班后再抢单',
        content: '',
        success: function (res) {
          if (res.confirm) {
            // console.log('用户点击确定');
          } else if (res.cancel) {
            // console.log('用户点击取消');
          }
        }
      })
    },
  },
  components: {},
};
</script>

<style scoped >
/* 上班css */
.gotowork_content {
  padding: 20rpx 20rpx;
  border-radius: 20rpx;
  margin: 20rpx 20rpx;
  background-color: white;
}
.gotowork1 .gotowork_content:first-child {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.gotowork_content1 {
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  margin: 20rpx 20rpx 0;
  background-color: white;
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f5f5f5;
}
.gotowork_content1 > span:nth-child(1) {
  font-size: 35rpx;
}
.gotowork_content1 > span:nth-child(2) {
  color: #999999;
}
.gotowork_content2 {
  padding: 15rpx 0;
  border-bottom: 1px solid #f5f5f5;
}
.content2_title {
  display: flex;
  justify-content: space-between;
}
.content2_title > span:nth-child(1) {
  font-size: 35rpx;
  width: 220rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.content2_title > span:nth-child(2) {
  /* flex: 2; */
  font-size: 35rpx;
  margin-right: 100rpx;
}
.content2_title > span:nth-child(3) {
  /* flex: 1; */
  color: #999999;
}
.content2_content {
  margin-top: 15rpx;
  display: flex;
  justify-content: space-between;
}
.content2_details {
  display: flex;
  flex-direction: column;
}
.content2_details span {
  margin: 10rpx 0;
}
.content2_content_but {
  width: 120rpx;
  height: 60rpx;
  line-height: 60rpx;
  background: #1677ff;
  border-radius: 40rpx;
  text-align: center;
  color: white;
  margin-top: 35rpx;
}
.gotowork_content3 {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
  color: #999999;
}
.gotowork_content3 img {
  height: 48rpx;
  width: 48rpx;
  border-radius: 50%;
  margin: 0 20rpx 20rpx 0;
  background-color: #eee;
}
.gotowork_content3 > div:nth-child(1) {
  display: flex;
}
.identification {
  color: #c1c1c7;
  margin-top: 35rpx;
}
</style>
